import { CameraIcon } from 'lucide-react'
import * as React from 'react'
import { Button } from 'v1-components'

export interface IUploadImageButtonProps {
  onUpload: (result: string, fileName: string) => void
}

export function UploadImageButton(props: IUploadImageButtonProps) {
  const { onUpload } = props
  return (
    <Button className="text-xl p-2 bg-transparent hover:bg-[#88888820] focus-visible:ring-0 mx-2">
      <label className="cursor-pointer text-[#303030]" htmlFor="upload">
        <CameraIcon />
      </label>
      <input
        onChange={(event) => {
          if (event.target.files) {
            const file = event.target.files[0]
            const reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = () => {
              const result = reader.result
              if (typeof result === 'string')
                onUpload(result, file.name)
            }
          }
        }}
        type="file"
        id="upload"
        name="upload"
        accept="image/png, image/jpeg"
        hidden
      />
    </Button>
  )
}
